<template>
  <a-modal width="40%" v-bind:visible="isShowCard" :footer="null" title="身份证照片" @cancel="onCancel">
    <a-spin :spinning="loading">
      <span>身份证正面：</span>
      <br />
      <br />
      <viewer v-if="idcard_front" :images="[idcard_front]">
        <img width="400" height="225" :src="idcard_front" alt="" />
      </viewer>
      <br />
      <span>身份证反面：</span>
      <br />
      <br />
      <viewer v-if="idcard_reverse" :images="[idcard_reverse]">
        <img width="400" height="225" :src="idcard_reverse" alt="" />
      </viewer>
    </a-spin>
  </a-modal>
</template>

<script>
import { viewPhotoAPI } from '@/api/userinfo.js'
export default {
  name: 'IdCard',
  props: {
    isShowCard: {
      type: Boolean,
      default: false
    },
    viewId: {
      type: Number,
      default: undefined
    }
  },
  watch: {
    async isShowCard(boolean) {
      if (boolean) {
        try {
          this.loading = true
          const { data } = await viewPhotoAPI({ id: this.viewId })
          this.idcard_front = data.idcard_front
          this.idcard_reverse = data.idcard_reverse
        } finally {
          this.loading = false
        }
      }
    }
  },
  data() {
    return {
      loading: false,
      idcard_front: '',
      idcard_reverse: ''
    }
  },
  methods: {
    onCancel() {
      this.$emit('update:isShowCard', false)
      this.$emit('update:viewId', undefined)
    }
  }
}
</script>

<style lang="less" scoped></style>
